<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { showLoading, hideLoading, reLaunch, navigateTo } from '@tarojs/taro';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { INSERT, MEETING_LOCATION_LIST } from '/@/api/modules/visitor/visitor-appointment-api';
import { formRules } from './state';

const visitorAppointmentFormRef = ref();

const state = reactive<{
  /**
   * 会客地点列表
   */
  meetingLocationList: AppMeetingLocation.Dto[];
  /**
   * 会客地点选择器是否显示
   */
  meetingLocationPickerIsShow: boolean;
}>({
  meetingLocationList: [],
  meetingLocationPickerIsShow: false,
});

const formState = reactive<AppSysVisitor.AppointmentDto>({
  personName: '',
  phone: '',
  applyDdUserId: '',
  meetingLocationId: '',
  meetingLocationName: '',
});

/**
 * @function 确认提交
 */
function submit() {
  visitorAppointmentFormRef.value.validate().then(({ valid }) => {
    if (!valid) return;
    showLoading({ title: '加载中...' });

    INSERT({ content: formState }).then((res) => {
      hideLoading();
      reLaunch({
        url: `/pages/visitor/appointment-success/index?realLink=${encodeURIComponent(
          res.realLink,
        )}`,
      });
    });
  });
}

onMounted(() => {
  LOGIN_APP().then((res) => {
    formState.applyDdUserId = res.sysUserDto.uaaUserId;
  });
  MEETING_LOCATION_LIST({}).then((res) => {
    state.meetingLocationList = res.content;
    if (state.meetingLocationList.length) {
      formState.meetingLocationId = state.meetingLocationList[0].meetingLocationId;
      formState.meetingLocationName = state.meetingLocationList[0].meetingLocationName;
    }
  });
});
</script>

<template>
  <view class="visitor-appointment app-page--1">
    <app-navbar title="访客预约" />
    <nut-tabs
      model-value="push"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'record') {
            reLaunch({ url: '/pages/visitor/appointment-record/index' });
          }
        }
      "
    >
      <nut-tab-pane title="发起提交" pane-key="push" />
      <nut-tab-pane title="查看记录" pane-key="record" />
    </nut-tabs>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="visitor-appointment__wrapper">
        <nut-form
          :model-value="formState"
          :rules="formRules"
          class="visitor-appointment__form"
          ref="visitorAppointmentFormRef"
        >
          <nut-form-item
            required
            label="姓名"
            prop="personName"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.personName"
              placeholder="请输入姓名"
              :border="false"
              clearable
            />
          </nut-form-item>
          <nut-form-item
            required
            label="联系电话"
            prop="phone"
            label-align="left"
            error-message-align="left"
          >
            <nut-input
              v-model="formState.phone"
              placeholder="请输入联系电话"
              type="digit"
              :border="false"
              clearable
              show-word-limit
              max-length="11"
            />
          </nut-form-item>
        </nut-form>
      </view>
      <view
        class="visitor-appointment__unknown-contact-wrapper"
        @click="
          navigateTo({
            url: '/pages/visitor/appointment-qrcode/index',
          })
        "
      >
        没有联系方式?
      </view>
    </scroll-view>
    <view class="visitor-appointment__footer">
      <nut-button type="info" block @click="submit()"> 提交 </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
